<!-- src/pages/Home.vue -->
<template>
  <el-container style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f7fa;">
    <el-main style="width:100vw;display:flex;align-items:center;justify-content:center;">
      <el-card class="exam-card" shadow="always">
        <div class="main-title">本科教学工作合格评估基本知识测试</div>
        <div class="main-desc">共 50 题，限时 50 分钟，及格分数为 60 分</div>
        <el-button type="primary" size="large" class="start-btn" @click="startExam">开始测试</el-button>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const startExam = () => router.push('/exam')
</script>

<style scoped>
.exam-card {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 36px 40px 36px;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  background: #fff;
}
.main-title {
  font-size: 28px;
  font-weight: bold;
  color: #222;
  margin-bottom: 18px;
  letter-spacing: 2px;
}
.main-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}
.start-btn {
  font-size: 18px;
  font-weight: bold;
  padding: 12px 48px;
  border-radius: 8px;
  letter-spacing: 2px;
}
.start-btn:focus {
  outline: none;
}
</style>
